{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_12\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_12\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_12\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "            // FIXME: Stop all previously running versions (?)\n",
       "            var processingInstance = Processing.getInstanceById(\"canvas_12\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "\n",
       "\n",
       "        var output_area = this;\n",
       "        // find my cell element\n",
       "        var cell_element = output_area.element.parents('.cell');\n",
       "        // which cell is it?\n",
       "        var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n",
       "        // get the cell object\n",
       "        var cell = Jupyter.notebook.get_cell(cell_idx);\n",
       "\n",
       "        function jyp_print(cell, newline) {\n",
       "            return function(message) {\n",
       "                cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n",
       "                                                   content: {text: message + newline,\n",
       "                                                             name: \"stdout\"}});\n",
       "            }\n",
       "        }\n",
       "        window.jyp_println = jyp_print(cell, \"\\n\");\n",
       "        window.jyp_print = jyp_print(cell, \"\");\n",
       "\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "           Processing.logger.println = jyp_print(cell, \"\\n\");\n",
       "           Processing.logger.print = jyp_print(cell, \"\");\n",
       "        });\n",
       "\n",
       "\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"canvas_div_12\">\n",
       "  <b>Sketch #12:</b><br/>\n",
       "  <canvas id=\"canvas_12\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_12\">\n",
       "  <button id=\"run_button_12\" onclick=\"startSketch('12');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_12\" onclick=\"pauseSketch('12');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_12\" onclick=\"setupSketch('12');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_12\" onclick=\"drawSketch('12');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #12 state:</b> <span id=\"state_12\">Loading...</span><br/>\n",
       "<script>\n",
       "\n",
       "function change_button(button, disable) {\n",
       "    button.disabled = disable;\n",
       "    if (disable) {\n",
       "        button.style.color = \"grey\";\n",
       "    } else {\n",
       "        button.style.color = \"black\";\n",
       "    }\n",
       "}\n",
       "\n",
       "function startSketch(id) {\n",
       "    switchSketchState(id, true);\n",
       "}\n",
       "\n",
       "function pauseSketch(id) {\n",
       "    switchSketchState(id, false);\n",
       "}\n",
       "\n",
       "function drawSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Drawing...\";\n",
       "            try {\n",
       "                processingInstance.redraw();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Drawing... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No drawing() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function setupSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.setup != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Setting up...\";\n",
       "            try {\n",
       "                processingInstance.setup();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Setting up... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No setup() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function switchSketchState(id, on) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (on) {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Running...\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"green\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id),  true);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), true);\n",
       "        processingInstance.loop();  // call Processing loop() function\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Paused.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "        processingInstance.noLoop(); // stop animation, call noLoop()\n",
       "    }\n",
       "}\n",
       "\n",
       "require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function () {\n",
       "    var processingCode = '// 1. Define classes:\\n\\nclass Leaf {\\n    float x;\\n    float y;\\n    \\n    Leaf(float x, float y) {\\n        this.x = x;\\n        this.y = y;\\n    }\\n\\n    void appear() { // method\\n        move();\\n        fill(135, 68, 70);\\n        int size = 10;\\n        triangle(x, y, \\n                 x + size, y + size, \\n                 x + size * .8, y - size * 0.6);\\n    }\\n    void move() {\\n        y++;\\n    }\\n}\\n\\nclass Building {\\n    float x;\\n    float y;\\n    \\n    Building(float x, float y) {\\n        this.x = x;\\n        this.y = y;\\n    }\\n    \\n    void appear() { //method\\n        move();\\n        fill(0, 128, 20);\\n        rect(x, y - 100, 40, 100);\\n    }\\n    void move() {\\n        // no move here\\n    }\\n    \\n}\\n\\nclass UFO {\\n    float x;\\n    float y;\\n    float direction = 1;\\n    \\n    UFO(float x, float y) {\\n        this.x = x;\\n        this.y = y;\\n    }\\n    \\n    void appear() { // method\\n        move();\\n        fill(255);\\n        ellipse(x, y, 20, 10);\\n    }\\n    void move() {\\n        x += direction;\\n        \\n        if (x < 0 || x > width) {\\n            direction = -1 * direction;\\n        }\\n        \\n    }\\n    \\n}\\n\\n// 2. Declaring the Global variables:\\n\\nUFO steve;\\nUFO ufo2;\\nUFO ufo3;\\n\\nBuilding building1;\\nBuilding building2;\\nBuilding building3;\\nBuilding building4;\\nBuilding building5;\\n\\nLeaf[] leaves = new Leaf[12];\\n\\n// Setup and Draw:\\n\\nvoid setup() {\\n    size(500, 300);\\n    // Create the instances:\\n    steve = new UFO(10, 100);\\n    ufo2 = new UFO(100, 75);\\n    ufo3 = new UFO(300, 120);\\n\\n    building1 = new Building(75, 160);\\n    building2 = new Building(200, 180);\\n    building3 = new Building(220, 170);\\n    building4 = new Building(400, 200);\\n    building5 = new Building(450, 190);\\n\\n    for (int i=0; i < leaves.length; i++) {\\n        leaves[i] = new Leaf(random(500), random(150) + 150);\\n    }\\n    /* Same as doing this:\\n        leaf[0] = new Leaf();\\n        leaf[1] = new Leaf();\\n        leaf[2] = new Leaf();\\n        leaf[3] = new Leaf();\\n        leaf[4] = new Leaf();\\n        leaf[5] = new Leaf();\\n        leaf[6] = new Leaf();\\n        leaf[7] = new Leaf();\\n        leaf[8] = new Leaf();\\n        leaf[9] = new Leaf();\\n        leaf[10] = new Leaf();\\n        leaf[11] = new Leaf();\\n    */\\n}\\n\\nvoid draw() {\\n    background(0, 0, 200);\\n    fill(0, 255, 0);\\n    rect(0, 150, 500, 150);\\n    building1.appear();\\n    building2.appear();\\n    building3.appear();\\n    building4.appear();\\n    building5.appear();\\n    \\n    for (int i=0; i < leaves.length; i++) {\\n        leaves[i].appear();\\n    }\\n\\n    steve.appear();\\n    ufo2.appear();\\n    ufo3.appear();\\n    \\n    /* Same as doing this:\\n        leaf[0].appear();\\n        leaf[1].appear();\\n        leaf[2].appear();\\n        leaf[3].appear();\\n        leaf[4].appear();\\n        leaf[5].appear();\\n        leaf[6].appear();\\n        leaf[7].appear();\\n        leaf[8].appear();\\n        leaf[9].appear();\\n        leaf[10].appear();\\n        leaf[11].appear();\\n    */\\n    \\n}';\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\n",
       "\n",
       "    try {\n",
       "        cc = Processing.compile(processingCode);\n",
       "    } catch (e) {\n",
       "        console.log(e);\n",
       "        cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "        document.getElementById(\"state_12\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_12\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_12\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_12\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_12\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_12\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\n",
       "        setTimeout(function () {\n",
       "            // Canvas:\n",
       "            if (processingInstance.externals.context === undefined) {\n",
       "                document.getElementById(\"canvas_div_12\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_12\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_12\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_12\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_12\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_12\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_12\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_12\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_12\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_12\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_12\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_12\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_12\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_12\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_12\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_12\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_12\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_12\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_12\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_12\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_12\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_12\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "// 1. Define classes:\n",
    "\n",
    "class Leaf {\n",
    "    float x;\n",
    "    float y;\n",
    "    \n",
    "    Leaf(float x, float y) {\n",
    "        this.x = x;\n",
    "        this.y = y;\n",
    "    }\n",
    "\n",
    "    void appear() { // method\n",
    "        move();\n",
    "        fill(135, 68, 70);\n",
    "        int size = 10;\n",
    "        triangle(x, y, \n",
    "                 x + size, y + size, \n",
    "                 x + size * .8, y - size * 0.6);\n",
    "    }\n",
    "    void move() {\n",
    "        y++;\n",
    "    }\n",
    "}\n",
    "\n",
    "class Building {\n",
    "    float x;\n",
    "    float y;\n",
    "    \n",
    "    Building(float x, float y) {\n",
    "        this.x = x;\n",
    "        this.y = y;\n",
    "    }\n",
    "    \n",
    "    void appear() { //method\n",
    "        move();\n",
    "        fill(0, 128, 20);\n",
    "        rect(x, y - 100, 40, 100);\n",
    "    }\n",
    "    void move() {\n",
    "        // no move here\n",
    "    }\n",
    "    \n",
    "}\n",
    "\n",
    "class UFO {\n",
    "    float x;\n",
    "    float y;\n",
    "    float vx = 1;\n",
    "    \n",
    "    UFO(float x, float y) {\n",
    "        this.x = x;\n",
    "        this.y = y;\n",
    "    }\n",
    "    \n",
    "    void appear() { // method\n",
    "        move();\n",
    "        fill(255);\n",
    "        ellipse(x, y, 20, 10);\n",
    "    }\n",
    "    void move() {\n",
    "        x += vx;\n",
    "        \n",
    "        if (x < 0 || x > width) {\n",
    "            vx = -1 * vx;\n",
    "        }\n",
    "        \n",
    "    }\n",
    "    \n",
    "}\n",
    "\n",
    "// 2. Declaring the Global variables:\n",
    "\n",
    "UFO steve;\n",
    "UFO ufo2;\n",
    "UFO ufo3;\n",
    "\n",
    "Building building1;\n",
    "Building building2;\n",
    "Building building3;\n",
    "Building building4;\n",
    "Building building5;\n",
    "\n",
    "Leaf[] leaves = new Leaf[12];\n",
    "\n",
    "// Setup and Draw:\n",
    "\n",
    "void setup() {\n",
    "    size(500, 300);\n",
    "    // Create the instances:\n",
    "    steve = new UFO(10, 100);\n",
    "    ufo2 = new UFO(100, 75);\n",
    "    ufo3 = new UFO(300, 120);\n",
    "\n",
    "    building1 = new Building(75, 160);\n",
    "    building2 = new Building(200, 180);\n",
    "    building3 = new Building(220, 170);\n",
    "    building4 = new Building(400, 200);\n",
    "    building5 = new Building(450, 190);\n",
    "\n",
    "    for (int i=0; i < leaves.length; i++) {\n",
    "        leaves[i] = new Leaf(random(500), random(150) + 150);\n",
    "    }\n",
    "    /* Same as doing this:\n",
    "        leaf[0] = new Leaf();\n",
    "        leaf[1] = new Leaf();\n",
    "        leaf[2] = new Leaf();\n",
    "        leaf[3] = new Leaf();\n",
    "        leaf[4] = new Leaf();\n",
    "        leaf[5] = new Leaf();\n",
    "        leaf[6] = new Leaf();\n",
    "        leaf[7] = new Leaf();\n",
    "        leaf[8] = new Leaf();\n",
    "        leaf[9] = new Leaf();\n",
    "        leaf[10] = new Leaf();\n",
    "        leaf[11] = new Leaf();\n",
    "    */\n",
    "}\n",
    "\n",
    "void draw() {\n",
    "    background(0, 0, 200);\n",
    "    fill(0, 255, 0);\n",
    "    rect(0, 150, 500, 150);\n",
    "    building1.appear();\n",
    "    building2.appear();\n",
    "    building3.appear();\n",
    "    building4.appear();\n",
    "    building5.appear();\n",
    "    \n",
    "    for (int i=0; i < leaves.length; i++) {\n",
    "        leaves[i].appear();\n",
    "    }\n",
    "\n",
    "    steve.appear();\n",
    "    ufo2.appear();\n",
    "    ufo3.appear();\n",
    "    \n",
    "    /* Same as doing this:\n",
    "        leaf[0].appear();\n",
    "        leaf[1].appear();\n",
    "        leaf[2].appear();\n",
    "        leaf[3].appear();\n",
    "        leaf[4].appear();\n",
    "        leaf[5].appear();\n",
    "        leaf[6].appear();\n",
    "        leaf[7].appear();\n",
    "        leaf[8].appear();\n",
    "        leaf[9].appear();\n",
    "        leaf[10].appear();\n",
    "        leaf[11].appear();\n",
    "    */\n",
    "    \n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Calysto Processing",
   "language": "java",
   "name": "calysto_processing"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "text/x-java",
    "version": 2
   },
   "file_extension": ".java",
   "mimetype": "text/x-java",
   "name": "java"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}